<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.min.js"></script>
</head>
<body>
<div id="a" style="margin-bottom: 200px">
    <fieldset>
        <legend>if: 注册</legend>
        <a href="#" @click="flag='email'">邮箱注册</a>
        <a href="#" @click="flag='phone'">手机注册</a>
        <a href="#" @click="flag='chat'">微信注册</a>
        使用key给控件加唯一标识,避开控件缓存
        <div v-if="flag == 'email'">
            邮箱地址:<input key="1">
        </div>
        <div v-else-if="flag == 'phone'">
            手机号码:<input key="2">
        </div>
        <div v-else>
            微信号码:<input>
        </div>
    </fieldset>

    <fieldset>
        <legend>show: 成绩</legend>
        分数: <input type="number" v-model="score">
        <span v-show="score < 60">不及格</span>
        <span v-show="score >= 60 && score < 80 ">及格</span>
        <span v-show="score >= 80 && score < 90 ">良好</span>
        <span v-show="score >= 90">优秀</span>
    </fieldset>


    <fieldset>
        <legend>for</legend>
        <span v-for=" like, i in likeItems ">
            <input type="radio" value="like"> {{i}}.{{like}}
        </span>
        <hr>
        <div v-for=" value , name, i in hero ">
            {{i}} : {{name}} : {{value}}
        </div>
        <hr>
        <span v-for=" i in 5 ">
            {{i}},
        </span>
    </fieldset>

</div>
<script>
    var v = new Vue({
        el :"#a",
        data : {
            flag : "email",
            score : 0,
            likeItems : ['篮球','电影','手游','看书'],
            hero : {
                name : "武松",
                gender : "男",
                age : 28
            }

        }
    })
</script>



</body>
</html>